import React, { createElement } from 'react'
import { render } from 'react-dom'
// let { createElement } = require('react')
// let { render } = require('react-dom')

// {
//     tagName: 'div',
//     props: {},
//     children: []
// }



// createElement ==> 创建react元素(创建虚拟dom)
// createElement(标签名称，属性， 子节点)
// let oSpan = createElement('span', {}, '!!!')

// let oText = createElement('p', {}, ['我是字段', oSpan])

// let oDiv = createElement('div', {}, oText)

let oDiv = <div>
    <p>我是字段<span>!!!aaaaaaabbbbbKKKKK</span></p>
    <h3>sdsfs</h3>
</div>


// render ==> 把虚拟dom转换为真实的dom
// render(要渲染的元素, 要渲染的位置, 渲染完成后的callback)
render(oDiv, document.getElementById('root'), () => {
    console.log('渲染成功')
})

// jsx  
// 1.遇到 < 开始解析html结构  
// 2.遇到 { 开始解析js 

// babel index.jsx -o index.js





